<template>
  <el-dialog
    v-if="load"
    title="批量图片下载"
    width="820"
    v-model="visible"
    @close="handleClose"
    draggable
    align-center
  >
    <div class="h-[500px] overflow-y-auto">
      <el-checkbox
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange"
      >
        全选
      </el-checkbox>
      <el-checkbox-group v-model="checkedImage" @change="handleCheckedCitiesChange">
        <el-checkbox
          v-for="(item, index) in records"
          :key="item.image_link"
          :label="item.image_link"
          :value="item.image_link"
          class="px-1 py-1 mr-1 relative w-[120px]"
        >
          <el-image
            :src="item.image_link_watermark || item.image_link || item.url"
            style="
              width: 100px;
              height: 100px;
              border: 1px solid #f0f0f0;
              border-radius: 4px;
            "
            @contextmenu.prevent
          ></el-image>
          <el-tooltip
            className="item"
            effect="dark"
            :content="item.image_name"
            placement="top"
          >
            <div class="line1 w-[100px] mt-1">{{ item.image_name }}</div>
          </el-tooltip>

          <div class="h-[20px] mt-1">{{ item.image_for_text || "" }}</div>
          <div
            class="absolute left-[28px] top-[1px] flex rounded-tl rounded-br overflow-hidden bg-[#000000]"
          >
            <div class="text-white text-xs px-1">
              {{ computeImageType(item.image_link) }}
            </div>
          </div>
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="text-[#ff6334]">
      注：勾选图片，点击下载提示发起下载任务成功后，请稍后前往基础管理-图片下载任务进行图片包下载
    </div>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" @click="handleSave">下载</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";
import { reactive, toRefs } from "vue";
import { computeImageType } from "@/utils/index.js";
import { getOptions, ImgDownloadTask } from "@/api/index.js";

const props = defineProps({
  gallery_id: {
    type: [Number, String],
    default: "",
  },
});

const { gallery_id } = toRefs(props);

const data = reactive({
  load: false,
  visible: false,
  checkAll: false,
  isIndeterminate: false,
  checkedImage: [],
  records: [],
});

const { load, visible, checkAll, isIndeterminate, checkedImage, records } = toRefs(data);

const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  console.log(data);
  records.value = data.values.filter((i) => {
    if (!i.delete) {
      return i;
    }
  });
  visible.value = true;
};

const handleCheckAllChange = (val) => {
  checkedImage.value = val ? records.value.filter((item) => !item.disabled) : [];
  isIndeterminate.value = false;
};
const handleCheckedCitiesChange = (value) => {
  const checkedCount = value.length;
  const totalEnabledCount = records.value.filter((item) => !item.disabled).length;
  checkAll.value = checkedCount === totalEnabledCount;
  isIndeterminate.value = checkedCount > 0 && checkedCount < totalEnabledCount;
};

const handleSave = async () => {
  if (!checkedImage.value.length) {
    ElMessage.error("至少勾选一项进行修改");
    return;
  }
  try {
    const res = await ImgDownloadTask({
      source: 1,
      gallery_id: gallery_id.value,
      gallery_image: checkedImage.value,
    });
    ElMessage.success(
      "发起图片下载成功，请稍后前往基础管理-图片下载任务中进行图片包下载"
    );
  } catch (e) {
    throw Error(e);
  } finally {
    handleClose();
  }
};

const handleClose = () => {
  records.value = [];
  checkedImage.value = [];
  checkAll.value = false;
  isIndeterminate.value = false;
  visible.value = false;
};

defineExpose({ open });
</script>
<style lang="scss" scoped>
.el-checkbox-group {
  :deep(.el-checkbox) {
    height: 140px;
    margin-bottom: 12px;
  }
}
</style>
